<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org"  xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
<meta charset="utf-8">
<head th:include="include_main :: header"></head>
<link href="/css/jquery-select/jquery.searchableSelect.css" rel="stylesheet" type="text/css">

<style itemscope>
    .fadeInRight {
        background-color: #F2F8FF;
    }

    .chrome-tips-box {
        padding: 15px;
        border-radius: 3px;
        margin-bottom: 15px;
        background-color: #2866D7;
    }

    .real-box {
        display: flex;
        align-items: center;
    }

    .real-box p:nth-child(1) {
        color: #333333;
        font-size: 18px;
        font-weight: bold;
        position: relative;
        padding-left: 10px;
    }

    .real-box p:nth-child(1):after {
        position: absolute;
        content: '';
        width: 3px;
        height: 16px;
        background-color: #2866D7;
        top: 0;
        bottom: 0;
        left: 0;
        margin: auto 0;
        border-radius: 2px;
    }

    .real-box p:nth-child(2) {
        color: #999999;
        font-size: 14px;
        margin-left: 20px;
    }
    .real-box button{
        margin: 0 0 10px 20px;
    }


    .census-box {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-bottom: 30px;
    }

    .census-box .census-item {
        width: 24%;
        color: #FFFFFF;
        display: flex;
        flex-direction: column;
        padding: 10px 20px;
    }

    .census-box .census-item:nth-child(1) {
        background-color: #4DC1C0;
    }

    .census-box .census-item:nth-child(2) {
        background-color: #44A2FC;
    }

    .census-box .census-item:nth-child(3) {
        background-color: #90C338;
    }

    .census-box .census-item:nth-child(4) {
        background-color: #F39561;
    }

    .census-box .census-item span:nth-child(2) {
        font-size: 26px;
        font-weight: bold;
        margin-top: 15px;
    }

    .wy-box {
        display: flex;
        justify-content: space-between;
    }

    .west-box {
        background-color: #FFFFFF;
        padding: 10px 20px;
        width: 70%;
    }

    .west-box .west-t {
        display: flex;
        align-items: center;
    }

    .west-box .west-t .t-3 {
        color: #2866D7;
        font-weight: bold;
        font-size: 18px;
    }

    .west-box .west-t .ss-s {
        display: flex;
        align-items: center;
        color: #999999;
        font-size: 14px;
        margin-left: 20px;
    }

    .west-t .ss-s .t-9 {
        background-color: #FFFFFF !important;
        border: 0;
        width: 90px;
        color: #999999;
        font-size: 14px;
        margin: 0 10px;
    }

    .real-box button,
    .west-box .west-t button,
    .yuan-box .t-t button {
        width: 80px;
        height: 26px;
        line-height: 18px;
        padding: 0;
        font-size: 14px;
        border-radius: 3px;
    }

    .west-box .draw-chart {
        height: 350px;
    }

    .yuan-box {
        background-color: #FFFFFF;
        margin-left: 30px;
        display: flex;
        flex-direction: column;
        padding: 10px 20px;
        width: 28%;
        position: relative;
    }

    .yuan-box .t-t {
        display: flex;
        align-items: center;
    }

    .yuan-box .t-t .t-3 {
        color: #333333;
        font-weight: bold;
        font-size: 18px;
    }

    .yuan-box .t-t input {
        background-color: #FFFFFF !important;
        border: 0;
        width: 115px;
        color: #333333;
        font-weight: bold;
        font-size: 18px;
        margin: 0;
    }

    .yuan-box .t-t button {
        margin-left: auto;
    }

    .yuan-box .month-sum {
        color: #3070FF;
        font-size: 28px;
        font-weight: bold;
        position: absolute;
        top: 10%;
        left: 20px;
    }

    .yuan-box .draw-chart {
        width: 100%;
        height: 350px;
    }

    .fl-box {
        background-color: #FFFFFF;
        margin: 30px 0 0 0;
        padding: 10px 20px;
        width: 49%;
        position: relative;
    }

    .fl-box button {
       margin-left: auto;
    }
</style>
<body class="gray-bg">
<div class="wrapper wrapper-content animated fadeInRight">
    <div class="padding-1">
        <!--谷歌提示-->
        <div class="row">
            <div class="col-xs-12">
                <div class="chrome-tips-box">
                    <button type="button" class="close" data-dismiss="alert">
                        <i class="fa fa-times"></i>
                    </button>
                    <i class="fa fa-check white"></i>
                    <font style="color: white;">为了您更好的使用本系统，建议屏幕分辨率1280*768以上，并且安装chrome谷歌浏览器 ——— </font><a
                        href="https://pc.qq.com/detail/1/detail_2661.html" target="_blank"><font style="color: white;">点击下载</font></a>
                </div>
            </div>
        </div>
        <!--表头总统计-->
        <div class="row">
            <div class="col-xs-12">
                <div class="real-box">
                    <p>实时数据</p>
                    <p id="now_time_p">/更新时间：2021-1-1 14:00:00</p>
                    <button class="btn btn-success" onclick="baseData()">刷新</button>
                </div>
                <div class="census-box">
                    <div class="census-item">
                        <span style="font-size: 16px">用户总量</span>
                        <span id="t_totalMember">254</span>
                        <span style="font-size: 12px;">与昨日对比得出+0%</span>
                    </div>
                    <div class="census-item">
                        <span style="font-size: 16px">总销售额</span>
                        <span id="t_orderpriceSum">￥2222</span>
                        <span style="font-size: 12px;">与昨日对比得出+<span id="t_orderpriceRate"></span></span>
                    </div>
                    <div class="census-item">
                        <span style="font-size: 16px">订单</span>
                        <span id="t_orderNum">222</span>
                        <span style="font-size: 12px;">与昨日对比得出+<span id="t_orderRate"></span></span>
                    </div>
                    <div class="census-item">
                        <span style="font-size: 16px">待付款订单</span>
                        <span id="t_unpaidOrderNum">254</span>
                        <span style="font-size: 12px;">与昨日对比得出+<span id="t_unpaidOrderRate"></span></span>
                    </div>
                </div>
            </div>
        </div>
        <!--成交金额、环形统计-->
        <div class="row">
            <div class="col-xs-12 wy-box">
                <div class="west-box">
                    <div class="west-t">
                        <span class="t-3">成交金额</span>
                        <div class="ss-s">
                            <input type="text" class="laydate-icon form-control t-9" placeholder="选择年月"
                                   id="cjje_endDate" name="cjje_endDate"
                                   onclick="laydate({istime: false, format: 'YYYY-MM'})"
                                   style="background-color: #fff;" readonly="readonly" th:value="${cjje_endDate}"/>
                        </div>
                        <button class="btn btn-success" onclick="cjjeTrend()">查询</button>
                    </div>
                    <div class="draw-chart" id="cjjeChart"></div>
                </div>
                <div class="yuan-box">
                    <div class="t-t">
                        <div class="t-3">月份：</div>
                        <input type="text" class="laydate-icon form-control t-9" placeholder="查询月份"
                               id="yuan_endDate" name="yuan_endDate"
                               onclick="laydate({istime: false, format: 'YYYY-MM-DD'})"
                               style="background-color: #fff;" readonly="readonly" th:value="${yuan_endDate}"/>
                        <button class="btn btn-success" onclick="yuanTrend()">查询</button>
                    </div>
                    <div class="month-sum" id="t_monthProductSum">￥5600</div>
                    <div class="draw-chart" id="yuanChart"></div>
                </div>
            </div>
        </div>
        <!--用户量、销售报告-->
        <div class="row">
            <div class="col-xs-12 wy-box">
                <div class="west-box fl-box">
                    <div class="west-t">
                        <span class="t-3">用户量</span>
                        <button class="btn btn-success" onclick="memberTrend()">更新</button>
                    </div>
                    <div class="draw-chart" id="userChart"></div>
                </div>
                <div class="west-box fl-box">
                    <div class="west-t">
                        <span class="t-3">销售报告</span>
                        <div class="ss-s">
                            <input type="text" class="laydate-icon form-control t-9" placeholder="开始时间"
                                   id="order_startDate" name="order_startDate"
                                   onclick="laydate({istime: false, format: 'YYYY-MM-DD'})"
                                   style="background-color: #fff;" readonly="readonly" th:value="${order_startDate}"/>
                            <span>~</span>
                            <input type="text" class="laydate-icon form-control t-9" placeholder="结束时间"
                                   id="order_endDate" name="order_endDate"
                                   onclick="laydate({istime: false, format: 'YYYY-MM-DD'})"
                                   style="background-color: #fff;" readonly="readonly" th:value="${order_endDate}"/>
                        </div>
                        <button class="btn btn-success" onclick="orderTrend()">查询</button>
                    </div>
                    <div class="draw-chart" id="orderChart"></div>
                </div>
            </div>
        </div>
        <!--<div class="row">
            <div class="col-sm-12 infobox-container" shiro:haspermission="index:base:base">
                <div class="infobox infobox-green col-xs-3 col-sm-3 col-md-3 col-lg-3">
                    <div class="infobox-icon">
                        <img src="/img/1.png"/>
                    </div>
                    <div class="infobox-data">
                        <span class="infobox-data-number" id="todayOrder">0</span>
                        <div class="infobox-content">今日成交订单数</div>
                    </div>
                </div>

                <div class="infobox infobox-green col-xs-3 col-sm-3 col-md-3 col-lg-3">
                    <div class="infobox-icon">
                        <img src="/img/4.png"/>
                    </div>
                    <div class="infobox-data">
                        <span class="infobox-data-number" id="orderTotal">0</span>
                        <div class="infobox-content">总成交订单数</div>
                    </div>
                </div>

                <div class="infobox infobox-green col-xs-3 col-sm-3 col-md-3 col-lg-3">
                    <div class="infobox-icon">
                        <img src="/img/7.png"/>
                    </div>
                    <div class="infobox-data">
                        <span class="infobox-data-number" id="todayNewMember">0</span>
                        <div class="infobox-content">今日增加会员</div>
                    </div>
                </div>

                <div class="infobox infobox-green col-xs-3 col-sm-3 col-md-3 col-lg-3">
                    <div class="infobox-icon">
                        <img src="/img/10.png"/>
                    </div>
                    <div class="infobox-data">
                        <span class="infobox-data-number" id="totalMember">0</span>
                        <div class="infobox-content">总会员数</div>
                    </div>
                </div>
                &lt;!&ndash;   <div class="infobox infobox-orange infobox-dark col-xs-6 col-sm-6 col-md-6 col-lg-3">
                      <div class="infobox-icon">
                          <i class="ace-icon fa fa-folder"></i>
                      </div>

                      <div class="infobox-data">
                          <span class="infobox-data-number" id="orderTotal">0</span>
                          <div class="infobox-content">总成交订单数</div>
                      </div>
                  </div> &ndash;&gt;
                &lt;!&ndash;  <div class="infobox infobox-blue col-xs-6 col-sm-6 col-md-6 col-lg-3">
                     <div class="infobox-icon">
                         <i class="ace-icon fa fa-user"></i>
                     </div>
                     <div class="infobox-data">
                         <span class="infobox-data-number" id="todayNewMember">0</span>
                         <div class="infobox-content">今日增加会员</div>
                     </div>
                 </div> &ndash;&gt;
                &lt;!&ndash;       <div class="infobox infobox-green infobox-dark col-xs-6 col-sm-6 col-md-6 col-lg-3">
                          <div class="infobox-icon">
                              <i class="ace-icon fa fa-users"></i>
                          </div>
                          <div class="infobox-data">
                              <span class="infobox-data-number" id="totalMember">0</span>
                              <div class="infobox-content">总会员数</div>
                          </div>
                      </div> &ndash;&gt;

                <div class="infobox infobox-green col-xs-3 col-sm-3 col-md-3 col-lg-3">
                    <div class="infobox-icon">
                        <img src="/img/2.png"/>
                    </div>
                    <div class="infobox-data">
                        <span class="infobox-data-number" id="todayProductNums">0</span>
                        <div class="infobox-content">今日下单商品量</div>
                    </div>
                </div>

                &lt;!&ndash;   <div class="infobox infobox-green col-xs-3 col-sm-3 col-md-3 col-lg-3">
                     <div class="infobox-icon">
                        <img src="/img/5.png"/>
                     </div>
                     <div class="infobox-data">
                        <span class="infobox-data-number" id="todayAccessTotal">0</span>
                         <div class="infobox-content">今日拜访会员数</div>
                     </div>
                 </div> &ndash;&gt;
                &lt;!&ndash;  <div class="infobox infobox-orange infobox-dark col-xs-6 col-sm-6 col-md-6 col-lg-3">
                        <div class="infobox-icon">
                            <i class="ace-icon fa fa-folder"></i>
                        </div>

                        <div class="infobox-data">
                            <span class="infobox-data-number" id="todayAccessTotal">0</span>
                            <div class="infobox-content">今日拜访会员数</div>
                        </div>
                    </div> &ndash;&gt;
                <div class="infobox infobox-green col-xs-3 col-sm-3 col-md-3 col-lg-3">
                    <div class="infobox-icon">
                        <img src="/img/8.png"/>
                    </div>
                    <div class="infobox-data">
                        <span class="infobox-data-number" id="todayOrderMid">0</span>
                        <div class="infobox-content">今日下单会员数</div>
                    </div>
                </div>
                &lt;!&ndash;   <div class="infobox infobox-blue col-xs-6 col-sm-6 col-md-6 col-lg-3">
                      <div class="infobox-icon">
                          <i class="ace-icon fa fa-user"></i>
                      </div>
                      <div class="infobox-data">
                          <span class="infobox-data-number" id="todayOrderMid">0</span>
                          <div class="infobox-content">今日下单会员数</div>
                      </div>
                  </div> &ndash;&gt;
                &lt;!&ndash;   <div class="infobox infobox-green col-xs-3 col-sm-3 col-md-3 col-lg-3">
                      <div class="infobox-icon">
                         <img src="/img/11.png"/>
                      </div>
                      <div class="infobox-data">
                          <span class="infobox-data-number" id="todayOrderRate">0</span>
                          <div class="infobox-content">今日下单比率</div>
                      </div>
                  </div> &ndash;&gt;
                &lt;!&ndash;  <div class="infobox infobox-green infobox-dark col-xs-6 col-sm-6 col-md-6 col-lg-3">
                     <div class="infobox-icon">
                         <i class="ace-icon fa fa-users"></i>
                     </div>
                     <div class="infobox-data">
                         <span class="infobox-data-number" id="todayOrderRate">0</span>
                         <div class="infobox-content">今日下单比率</div>
                     </div>
                 </div> &ndash;&gt;
                &lt;!&ndash;   <div class="infobox infobox-green col-xs-3 col-sm-3 col-md-3 col-lg-3">
                                   <div class="infobox-icon">
                                      <img src="/img/3.png"/>
                                   </div>
                                   <div class="infobox-data">
                                       <span class="infobox-data-number" id="accessTotal">0</span>
                                       <div class="infobox-content">总拜访会员数</div>
                                   </div>
                               </div> &ndash;&gt;
                &lt;!&ndash;  <div class="infobox infobox-blue col-xs-6 col-sm-6 col-md-6 col-lg-3">
                     <div class="infobox-icon">
                         <i class="ace-icon fa fa-user"></i>
                     </div>
                     <div class="infobox-data">
                         <span class="infobox-data-number" id="accessTotal">0</span>
                         <div class="infobox-content">总拜访会员数</div>
                     </div>
                 </div> &ndash;&gt;
                <div class="infobox infobox-green col-xs-3 col-sm-3 col-md-3 col-lg-3">
                    <div class="infobox-icon">
                        <img src="/img/6.png"/>
                    </div>
                    <div class="infobox-data">
                        <span class="infobox-data-number" id="orderMidTotal">0</span>
                        <div class="infobox-content">总下单会员数</div>
                    </div>
                </div>
                &lt;!&ndash;    <div class="infobox infobox-orange infobox-dark col-xs-6 col-sm-6 col-md-6 col-lg-3">
                       <div class="infobox-icon">
                           <i class="ace-icon fa fa-users"></i>
                       </div>
                       <div class="infobox-data">
                           <span class="infobox-data-number" id="orderMidTotal">0</span>
                           <div class="infobox-content">总下单会员数</div>
                       </div>
                   </div> &ndash;&gt;
                &lt;!&ndash;    <div class="infobox infobox-green col-xs-3 col-sm-3 col-md-3 col-lg-3">
                      <div class="infobox-icon">
                         <img src="/img/9.png"/>
                      </div>
                      <div class="infobox-data">
                           <span class="infobox-data-number" id="orderRate">0</span>
                          <div class="infobox-content">总下单比率</div>
                      </div>
                  </div> &ndash;&gt;

                &lt;!&ndash;   <div class="infobox infobox-blue col-xs-6 col-sm-6 col-md-6 col-lg-3">
                      <div class="infobox-icon">
                          <i class="ace-icon fa fa-users"></i>
                      </div>
                      <div class="infobox-data">
                          <span class="infobox-data-number" id="orderRate">0</span>
                          <div class="infobox-content">总下单比率</div>
                      </div>
                  </div> &ndash;&gt;
                <div class="infobox infobox-green col-xs-3 col-sm-3 col-md-3 col-lg-3">
                    <div class="infobox-icon">
                        <img src="/img/12.png"/>
                    </div>
                    <div class="infobox-data">
                        <span class="infobox-data-number" id="todayOrderPrice">0</span>
                        <div class="infobox-content">今日下单金额</div>
                    </div>
                </div>

                &lt;!&ndash;  <div class="infobox infobox-green infobox-dark col-xs-6 col-sm-6 col-md-6 col-lg-3">
                     <div class="infobox-icon">
                         <i class="ace-icon fa fa-users"></i>
                     </div>
                     <div class="infobox-data">
                         <span class="infobox-data-number" id="todayOrderPrice">0</span>
                         <div class="infobox-content">今日下单金额</div>
                     </div>
                 </div> &ndash;&gt;
            </div>
            <div class="col-sm-12">
                <div class="row">
                    <div class="col-xs-12">
                        <div class="space-6"></div>
                    </div>
                </div>
                <div class="row" shiro:haspermission="index:memberTrend:memberTrend">
                    <div class="col-xs-12">
                        <div class="panel panel-default">
                            <div class="panel-heading" style="background-color: #2F98F2">会员走势图</div>
                            <div class="panel-body total_trend_chart">
                                <div class="draw_container" style="height:20em;margin-top:1em" id="memberTrend">
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="row" shiro:haspermission="index:memberTrend:cumulateMemberTrend">
                    <div class="col-xs-12">
                        <div class="panel panel-default">
                            <div class="panel-heading" style="background-color: #88D02A">会员累积走势图</div>
                            <div class="panel-body total_trend_chart">
                                <div class="draw_container" style="height:20em;margin-top:1em" id="cumulateMemberTrend">
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="row" shiro:haspermission="index:memberTrend:memberActionTrend">
                    <div class="col-xs-12">
                        <div class="panel panel-default">
                            <div class="panel-heading" style="background-color: #7BB62E">用户行为走势图
                                <div class="pull-right" style="padding-right: 100px">
                                    <label style="font-weight: 700;float: left;">选择日期:</label>
                                    <div class="columns pull-right">
                                        <input type="text" class="laydate-icon"
                                               th:value="${defaultDate} == null?null:${#dates.format(defaultDate,'yyyy-MM-dd')}"
                                               id="targetDate" name="targetDate" placeholder="请选择日期"
                                               onclick="laydate({
                                               istime: false,
                                               format: 'YYYY-MM-DD',
                                               festival: true,
                                               choose: memberActionTrend
                                               })"
                                               style="background-color: #fff;height: 25px"/>
                                    </div>
                                </div>
                            </div>
                            <div class="panel-body total_trend_chart">
                                <div class="draw_container" style="height:20em;margin-top:1em" id="memberActionTrend">
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="row" shiro:haspermission="index:orderTrend:orderTrend">
                    <div class="col-xs-12">
                        <div class="panel panel-default">
                            <div class="panel-heading" style="background-color: #FC7399">订单走势图
                            </div>
                            <div class="panel-body total_trend_chart">
                                <div class="draw_container" style="height:20em;margin-top:1em" id="orderTrend">
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>-->
    </div>
    <div th:include="include :: footer"></div>

</div>

<script src="/js/plugins/echarts/echarts.min.js"></script>
<script type="text/javascript" src="/js/plugins/layer/laydate/laydate.js"></script>
<script src="/js/jquery-select/jquery.searchableSelect.js"></script>

<script type="text/javascript">
    var prefix = "/indexData";
    $(document).ready(function () {
        //每分钟刷新一次数据
        setInterval(function (){
            baseData();
        },10000)

        baseData();
        cjjeTrend();
        yuanTrend();
        orderTrend();
        memberTrend();

        initBaseInfo();
        cumulateMemberTrend();
        memberActionTrend();
    });

    /**
     * 基础数据
     * 铁牛
     * */
    function baseData() {
        var now = new Date();
        var time = now.getFullYear() + "-" +((now.getMonth()+1)<10?"0":"")+(now.getMonth()+1)+"-"+(now.getDate()<10?"0":"")+now.getDate()+' '+now.getHours()+':'+now.getMinutes() + ':' + now.getSeconds();
        $('#now_time_p').text('/更新时间：' + time);
        $.ajax({
            url: prefix + "/getDataCenter",
            type: 'GET',
            dataType: 'JSON',
            data: {},
            success: function (data) {
                if (data.code == 0) {
                    var base = data.dataCenter;
                    if (base) {
                        $('#t_orderRate').text(base.orderRate + '%');
                        $('#t_orderNum').text(base.orderNum);
                        $('#t_orderpriceSum').text('￥' + base.orderpriceSum);
                        $('#t_orderpriceRate').text(base.orderpriceRate + '%');
                        $('#t_unpaidOrderNum').text(base.unpaidOrderNum);
                        $('#t_unpaidOrderRate').text(base.unpaidOrderRate + '%');
                    }
                }
            }
        });
    }

    /**
     * 初始化基础数据
     */
    function initBaseInfo() {
        $.ajax({
            url: prefix + "/baseInfo",
            type: 'POST',
            dataType: 'JSON',
            data: {},
            success: function (data) {
                if (data.code == 0) {
                    var base = data.baseInfo;
                    if (base) {
                        $('#todayOrder').text(base.todayOrder);
                        $('#orderTotal').text(base.orderTotal);
                        $('#todayNewMember').text(base.todayNewMember);
                        $('#totalMember').text(base.totalMember);
                        $('#t_totalMember').text(base.totalMember);


                        $('#todayProductNums').text(base.todayProductNums);
                        $('#todayAccessTotal').text(base.todayAccessTotal);
                        $('#todayOrderMid').text(base.todayOrderMid);
                        $('#todayOrderRate').text(base.todayOrderRate);

                        $('#accessTotal').text(base.accessTotal);
                        $('#orderMidTotal').text(base.orderMidTotal);
                        $('#orderRate').text(base.orderRate);
                        $('#todayOrderPrice').text(base.todayOrderPrice);
                    }
                }
            }
        });
    }

    /**
     * 成交金额折线图数据
     * 铁牛
     */
    function cjjeTrend() {
        var cjjeChart = echarts.init(document.getElementById('cjjeChart'));
        let time = $.trim($("#cjje_endDate").val()).split('-')[0] + '-' + $.trim($("#cjje_endDate").val()).split('-')[1]
        $.ajax({
            url: prefix + "/getMonthOrderSumList",
            type: 'GET',
            dataType: 'JSON',
            data: {
                payTime: time,
            },
            success: function (data) {
                if (data.code == 0) {
                    var sumList = data.monthOrderSumList
                    var xList = []
                    var yList = []
                    sumList.forEach((item, index) => {
                        var month = item.payTimeStr.split('-')[1]
                        xList.push(month)
                        yList.push(item.payPrice)
                    })
                    var option = {
                        tooltip: {
                            show: true,
                            trigger: 'axis'
                        },
                        xAxis: {
                            name: '月',
                            type: 'category',
                            data: xList,
                            axisLine: {//坐标轴线
                                lineStyle: {
                                    opacity: 0.1
                                }
                            },
                            axisTick: {// 去掉刻度线
                                show: false
                            },
                        },
                        yAxis: {
                            name: '元',
                            type: 'value',
                            axisLine: {//坐标轴线
                                lineStyle: {
                                    opacity: 0.1
                                }
                            },
                            axisTick: {// 去掉刻度线
                                show: false
                            },
                            splitLine: { //网格样式
                                show: true,
                                lineStyle: {
                                    color: ['#DFE6F3'],
                                    width: 1,
                                    type: 'solid'
                                }
                            },
                        },
                        series: [{
                            name: '最高',
                            data: yList,
                            color: '#2866D7',
                            type: 'line',
                            smooth: true,
                        }]
                    };
                    cjjeChart.setOption(option);
                }
            }
        })
    }

    /**
     * 环形统计数据
     * 铁牛
     */
    function yuanTrend() {
        var yuanChart = echarts.init(document.getElementById('yuanChart'));
        $.ajax({
            url: prefix + "/getTopOrderProduct",
            type: 'GET',
            dataType: 'JSON',
            data: {
                payTime: $.trim($("#yuan_endDate").val()),
            },
            success: function (data) {
                if (data.code == 0) {
                    if(data.topOrderProduct.monthProductSum.payPrice)
                        $('#t_monthProductSum').text('￥' + data.topOrderProduct.monthProductSum.payPrice);//总金额
                    else $('#t_monthProductSum').text('￥0');//总金额

                    var pList = data.topOrderProduct.fourOrderProductList
                    var dList = []
                    var cColor = ''
                    pList.forEach((item, index) => {
                        if (index == 0) cColor = '#2866D7'
                        else if (index == 1) cColor = '#FF974A'
                        else if (index == 2) cColor = '#3DD598'
                        else if (index == 3) cColor = '#FC5959'
                        dList.push({
                            value: item.productNum,
                            name: item.productName,
                            itemStyle: {
                                color: cColor
                            }
                        },)
                    })
                    var option = {
                        tooltip: {
                            trigger: 'item'
                        },
                        legend: {
                            // itemGap: 20,//每项之间的间隔
                            bottom: '5%',
                            left: 'center',
                        },
                        series: [
                            {
                                type: 'pie',
                                radius: ['50%', '70%'],
                                center: ['50%', '40%'], //图的位置，距离左跟上的位置
                                avoidLabelOverlap: false,
                                label: {
                                    show: false,
                                    position: 'center',
                                    fontSize: '16',
                                },
                                emphasis: {
                                    label: {
                                        show: true,
                                        fontSize: '16',
                                        fontWeight: 'bold'
                                    }
                                },
                                labelLine: {
                                    show: false
                                },
                                data: dList
                            }
                        ]
                    };
                    yuanChart.setOption(option);
                }
            }
        })
    }

    /**
     * 销售报告，柱线图
     * 铁牛
     * */
    function orderTrend(){
        var orderChart = echarts.init(document.getElementById('orderChart'));
        $.ajax({
            url: prefix + "/getYearOrderSumList",
            type: 'GET',
            dataType: 'JSON',
            data: {
                payTimeStart: $.trim($("#order_startDate").val()),
                payTimeEnd: $.trim($("#order_endDate").val()),
            },
            success: function (data) {
                if (data.code == 0) {
                    var dList = data.yearOrderSumList
                    var xList = []
                    var yList = []
                    dList.forEach(item=>{
                        xList.push(item.payTimeStr)
                        yList.push(item.payPrice)
                    })
                    var option = {
                        tooltip: {
                            trigger: 'axis',
                            axisPointer: {            // 坐标轴指示器，坐标轴触发有效
                                type: 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
                            }
                        },
                        grid: {
                            left: '3%',
                            right: '4%',
                            bottom: '3%',
                            containLabel: true
                        },
                        xAxis: [
                            {
                                type: 'category',
                                data: xList,
                                axisLine: {//坐标轴线
                                    lineStyle: {
                                        opacity: 0.1
                                    }
                                },
                                axisTick: {// 去掉刻度线
                                    show: false
                                },
                            }
                        ],
                        yAxis: [{
                            name: '元',
                            type: 'value',
                            axisLine: {//坐标轴线
                                lineStyle: {
                                    opacity: 0.1
                                }
                            },
                            axisTick: {// 去掉刻度线
                                show: false
                            },
                            splitLine: { //网格样式
                                show: true,
                                lineStyle: {
                                    color: ['#DFE6F3'],
                                    width: 1,
                                    type: 'solid'
                                }
                            },
                        }],
                        series: [{
                            name: '直接访问',
                            type: 'bar',
                            barWidth: '30%',
                            color: '#2866D7',
                            data: yList
                        }]
                    };
                    orderChart.setOption(option);
                }
            }
        })
    }
    /**
     * 用户量，折线图
     * 铁牛
     */
    function memberTrend() {
        var userChart = echarts.init(document.getElementById('userChart'));
        $.ajax({
            url: prefix + "/memberTrend",
            type: 'POST',
            dataType: 'JSON',
            data: {},
            success: function (data) {
                if (data.code == 0) {
                    var trend = data.trend;
                    if (!trend) return
                    var year = trend.days[0].split('-')[0] + '年'
                    var xList = []
                    var yList = trend.newMembers
                    trend.days.forEach(item=>{
                        xList.push(item.split('-')[1] + '-' + item.split('-')[2])
                    })
                    var option = {
                        tooltip: {
                            show: true,
                            trigger: 'axis'
                        },
                        xAxis: {
                            name: year,
                            type: 'category',
                            data: xList,
                            axisLine: {//坐标轴线
                                lineStyle: {
                                    opacity: 0.1
                                }
                            },
                            axisTick: {// 去掉刻度线
                                show: false
                            },
                        },
                        yAxis: {
                            name: '单位/个',
                            type: 'value',
                            axisLine: {//坐标轴线
                                lineStyle: {
                                    opacity: 0.1
                                }
                            },
                            axisTick: {// 去掉刻度线
                                show: false
                            },
                            splitLine: { //网格样式
                                show: true,
                                lineStyle: {
                                    color: ['#DFE6F3'],
                                    width: 1,
                                    type: 'solid'
                                }
                            },
                        },
                        series: [{
                            name: '最高',
                            data: yList,
                            color: '#8055F5',
                            type: 'line',
                            smooth: true,
                        }]
                    };
                    userChart.setOption(option);
                }
            }
        });
    }

    /* function memberTrend() {
        var memberTrend = echarts.init(document.getElementById('memberTrend'));
        $.ajax({
            url: prefix + "/memberTrend",
            type: 'POST',
            dataType: 'JSON',
            data: {},
            success: function (data) {
                if (data.code == 0) {
                    var trend = data.trend;
                    if (!trend) {
                        return;
                    }
                    var option = {
                        title: {
                            text: '会员走势图'
                        },
                        tooltip: {
                            trigger: 'axis',
                            position: function (pt) {
                                return [pt[0], '20%'];
                            }
                        },
                        grid: {
                            left: '3%',
                            right: '4%',
                            bottom: '3%',
                            containLabel: true
                        },
                        toolbox: {
                            feature: {
                                dataZoom: {
                                    yAxisIndex: 'none'
                                },
                                restore: {},
                                saveAsImage: {}
                            }
                        },
                        xAxis: {
                            type: 'category',
                            boundaryGap: false,
                            data: trend.days
                        },
                        yAxis: {
                            type: 'value',
                            boundaryGap: [0, '100%']
                        },
                        dataZoom: [{
                            type: 'inside',
                            start: 50,
                            end: 100
                        }, {
                            start: 50,
                            end: 100,
                            handleIcon: 'M10.7,11.9v-1.3H9.3v1.3c-4.9,0.3-8.8,4.4-8.8,9.4c0,5,3.9,9.1,8.8,9.4v1.3h1.3v-1.3c4.9-0.3,8.8-4.4,8.8-9.4C19.5,16.3,15.6,12.2,10.7,11.9z M13.3,24.4H6.7V23h6.6V24.4z M13.3,19.6H6.7v-1.4h6.6V19.6z',
                            handleSize: '80%',
                            handleStyle: {
                                color: '#fff',
                                shadowBlur: 3,
                                shadowColor: 'rgba(0, 0, 0, 0.6)',
                                shadowOffsetX: 2,
                                shadowOffsetY: 2
                            }
                        }],
                        series: [
                            {
                                name: '会员数',
                                type: 'line',
                                smooth: true,
                                symbol: 'none',
                                sampling: 'average',
                                itemStyle: {
                                    normal: {
                                        color: 'rgb(80, 70, 255)'
                                    }
                                },
                                areaStyle: {
                                    normal: {
                                        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                                            offset: 0,
                                            color: 'rgb(51, 158, 255)'
                                        }, {
                                            offset: 1,
                                            color: 'rgb(80, 70, 255)'
                                        }])
                                    }
                                },
                                data: trend.newMembers
                            }]
                    };
                    memberTrend.setOption(option);
                }
            }
        });
    } 
  */
    /**
     * 累积会员走势
     */
    function cumulateMemberTrend() {
        var cumulateMemberTrend = echarts.init(document.getElementById('cumulateMemberTrend'));
        $.ajax({
            url: prefix + "/cumulateMemberTrend",
            type: 'POST',
            dataType: 'JSON',
            data: {},
            success: function (data) {
                if (data.code == 0) {
                    var trend = data.trend;
                    if (!trend) {
                        return;
                    }
                    var option = {
                        title: {
                            text: '会员累积走势图'
                        },
                        tooltip: {
                            trigger: 'axis',
                            position: function (pt) {
                                return [pt[0], '20%'];
                            }
                        },
                        grid: {
                            left: '3%',
                            right: '4%',
                            bottom: '3%',
                            containLabel: true
                        },
                        toolbox: {
                            feature: {
                                dataZoom: {
                                    yAxisIndex: 'none'
                                },
                                restore: {},
                                saveAsImage: {}
                            }
                        }, xAxis: [{
                            type: 'category',
                            data: trend.days,
                            axisTick: {
                                alignWithLabel: true
                            }
                        }
                        ],
                        yAxis: {
                            type: 'value',
                        },
                        dataZoom: [{
                            type: 'inside',
                            start: 50,
                            end: 100
                        }, {
                            start: 50,
                            end: 100,
                            handleIcon: 'M10.7,11.9v-1.3H9.3v1.3c-4.9,0.3-8.8,4.4-8.8,9.4c0,5,3.9,9.1,8.8,9.4v1.3h1.3v-1.3c4.9-0.3,8.8-4.4,8.8-9.4C19.5,16.3,15.6,12.2,10.7,11.9z M13.3,24.4H6.7V23h6.6V24.4z M13.3,19.6H6.7v-1.4h6.6V19.6z',
                            handleSize: '80%',
                            handleStyle: {
                                color: '#fff',
                                shadowBlur: 3,
                                shadowColor: 'rgba(0, 0, 0, 0.6)',
                                shadowOffsetX: 2,
                                shadowOffsetY: 2
                            }
                        }],
                        series: [
                            {
                                name: '会员数',
                                type: 'bar',
                                barWidth: '60%',
                                itemStyle: {
                                    normal: {
                                        color: 'rgb(136,208,42,1)'
                                    }
                                },
                                areaStyle: {
                                    normal: {
                                        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                                            offset: 0,
                                            color: 'rgb(51, 158, 255)'
                                        }, {
                                            offset: 1,
                                            color: 'rgb(80, 70, 255)'
                                        }])
                                    }
                                },
                                data: trend.memberNums
                            }]
                    };
                    cumulateMemberTrend.setOption(option);
                }
            }
        });
    }


    /*   function cumulateMemberTrend() {
          var cumulateMemberTrend = echarts.init(document.getElementById('cumulateMemberTrend'));
          $.ajax({
              url: prefix + "/cumulateMemberTrend",
              type: 'POST',
              dataType: 'JSON',
              data: {},
              success: function (data) {
                  if (data.code == 0) {
                      var trend = data.trend;
                      if (!trend) {
                          return;
                      }
                      var option = {
                          title: {
                              text: '会员累积走势图'
                          },
                          tooltip: {
                              trigger: 'axis',
                              position: function (pt) {
                                  return [pt[0], '20%'];
                              }
                          },
                          grid: {
                              left: '3%',
                              right: '4%',
                              bottom: '3%',
                              containLabel: true
                          },
                          toolbox: {
                              feature: {
                                  dataZoom: {
                                      yAxisIndex: 'none'
                                  },
                                  restore: {},
                                  saveAsImage: {}
                              }
                          },
                          xAxis: {
                              type: 'category',
                              boundaryGap: false,
                              data: trend.days
                          },
                          yAxis: {
                              type: 'value',
                              boundaryGap: [0, '100%']
                          },
                          dataZoom: [{
                              type: 'inside',
                              start: 50,
                              end: 100
                          }, {
                              start: 50,
                              end: 100,
                              handleIcon: 'M10.7,11.9v-1.3H9.3v1.3c-4.9,0.3-8.8,4.4-8.8,9.4c0,5,3.9,9.1,8.8,9.4v1.3h1.3v-1.3c4.9-0.3,8.8-4.4,8.8-9.4C19.5,16.3,15.6,12.2,10.7,11.9z M13.3,24.4H6.7V23h6.6V24.4z M13.3,19.6H6.7v-1.4h6.6V19.6z',
                              handleSize: '80%',
                              handleStyle: {
                                  color: '#fff',
                                  shadowBlur: 3,
                                  shadowColor: 'rgba(0, 0, 0, 0.6)',
                                  shadowOffsetX: 2,
                                  shadowOffsetY: 2
                              }
                          }],
                          series: [
                              {
                                  name: '会员数',
                                  type: 'line',
                                  smooth: true,
                                  symbol: 'none',
                                  sampling: 'average',
                                  itemStyle: {
                                      normal: {
                                          color: 'rgb(154, 188, 50)'
                                      }
                                  },
                                  areaStyle: {
                                      normal: {
                                          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                                              offset: 0,
                                              color: 'rgb(154, 188, 50)'
                                          }, {
                                              offset: 1,
                                              color: 'rgb(231, 245, 189)'
                                          }])
                                      }
                                  },
                                  data: trend.memberNums
                              }]
                      };
                      cumulateMemberTrend.setOption(option);
                  }
              }
          });
      } */

    /**
     * 用户行为走势图
     */
    function memberActionTrend() {
        var memberActionTrend = echarts.init(document.getElementById('memberActionTrend'));
        var targetDate = $('#targetDate').val();
        $.ajax({
            url: prefix + "/memberActionTrend",
            type: 'POST',
            dataType: 'JSON',
            data: {
                targetDate: targetDate
            },
            success: function (data) {
                if (data.code == 0) {
                    var trend = data.trend;
                    if (!trend) {
                        return;
                    }
                    var option = {
                        color: ['#E8B110'],
                        title: {
                            text: '用户行为走势图'
                        },
                        tooltip: {
                            trigger: 'axis',
                            axisPointer: {            // 坐标轴指示器，坐标轴触发有效
                                type: 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
                            }
                        },
                        grid: {
                            left: '3%',
                            right: '4%',
                            bottom: '3%',
                            containLabel: true
                        },
                        toolbox: {
                            feature: {
                                dataZoom: {
                                    yAxisIndex: 'none'
                                },
                                restore: {},
                                saveAsImage: {}
                            }
                        },
                        xAxis: [
                            {
                                type: 'category',
                                data: trend.hours,
                                axisTick: {
                                    alignWithLabel: true
                                }
                            }
                        ],

                        yAxis: {
                            type: 'value',
                        },
                        dataZoom: [{
                            type: 'inside',
                            start: 50,
                            end: 100
                        }, {
                            start: 50,
                            end: 100,
                            handleIcon: 'M10.7,11.9v-1.3H9.3v1.3c-4.9,0.3-8.8,4.4-8.8,9.4c0,5,3.9,9.1,8.8,9.4v1.3h1.3v-1.3c4.9-0.3,8.8-4.4,8.8-9.4C19.5,16.3,15.6,12.2,10.7,11.9z M13.3,24.4H6.7V23h6.6V24.4z M13.3,19.6H6.7v-1.4h6.6V19.6z',
                            handleSize: '80%',
                            handleStyle: {
                                color: '#fff',
                                shadowBlur: 3,
                                shadowColor: 'rgba(0, 0, 0, 0.6)',
                                shadowOffsetX: 2,
                                shadowOffsetY: 2
                            }
                        }],
                        series: [
                            {
                                name: '下单会员数',
                                type: 'bar',
                                smooth: true,
                                symbol: 'none',
                                sampling: 'average',
                                itemStyle: {
                                    normal: {
                                        color: 'rgb(136,208,42,1)'
                                    }
                                },
                                areaStyle: {
                                    normal: {
                                        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                                            offset: 0,
                                            color: 'rgb(154, 188, 50)'
                                        }, {
                                            offset: 1,
                                            color: 'rgb(231, 245, 189)'
                                        }])
                                    }
                                },
                                data: trend.nums
                            }]
                    };
                    memberActionTrend.setOption(option);
                }
            }
        });
    }

    /* function memberActionTrend() {
        var memberActionTrend = echarts.init(document.getElementById('memberActionTrend'));
        var targetDate = $('#targetDate').val();
        $.ajax({
            url: prefix + "/memberActionTrend",
            type: 'POST',
            dataType: 'JSON',
            data: {
                targetDate:targetDate
            },
            success: function (data) {
                if (data.code == 0) {
                    var trend = data.trend;
                    if (!trend) {
                        return;
                    }
                    var option = {
                        color: ['#E8B110'],
                        title: {
                            text: '用户行为走势图'
                        },
                        tooltip: {
                            trigger: 'axis',
                            axisPointer : {            // 坐标轴指示器，坐标轴触发有效
                                type : 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
                            }
                        },
                        grid: {
                            left: '3%',
                            right: '4%',
                            bottom: '3%',
                            containLabel: true
                        },
                        toolbox: {
                            feature: {
                                dataZoom: {
                                    yAxisIndex: 'none'
                                },
                                restore: {},
                                saveAsImage: {}
                            }
                        },
                        xAxis: {
                            type: 'category',
                            boundaryGap: false,
                            data: trend.hours
                        },
                        yAxis: {
                            type: 'value',
                            boundaryGap: [0, '100%']
                        },
                        series: [
                            {
                                name: '下单会员数',
                                type: 'line',
                                smooth: true,
                                symbol: 'none',
                                sampling: 'average',
                                itemStyle: {
                                    normal: {
                                        color: 'rgb(154, 188, 50)'
                                    }
                                },
                                areaStyle: {
                                    normal: {
                                        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                                            offset: 0,
                                            color: 'rgb(154, 188, 50)'
                                        }, {
                                            offset: 1,
                                            color: 'rgb(231, 245, 189)'
                                        }])
                                    }
                                },
                                data: trend.nums
                            }]
                    };
                    memberActionTrend.setOption(option);
                }
            }
        });
    } */


    /**
     * 会员趋势
     */
    /*function orderTrend() {
        var orderTrend = echarts.init(document.getElementById('orderTrend'));
        $.ajax({
            url: prefix + "/orderTrend",
            type: 'POST',
            dataType: 'JSON',
            data: {},
            success: function (data) {
                if (data.code == 0) {
                    var trend = data.trend;
                    if (!trend) {
                        return;
                    }
                    var option = {
                        title: {
                            text: '订单走势图'
                        },
                        tooltip: {
                            trigger: 'axis',
                            position: function (pt) {
                                return [pt[0], '20%'];
                            }
                        },
                        grid: {
                            left: '3%',
                            right: '4%',
                            bottom: '3%',
                            containLabel: true
                        },
                        toolbox: {
                            feature: {
                                dataZoom: {
                                    yAxisIndex: 'none'
                                },
                                restore: {},
                                saveAsImage: {}
                            }
                        },

                        xAxis: [
                            {
                                type: 'category',
                                data: trend.days,
                                axisTick: {
                                    alignWithLabel: true
                                }
                            }
                        ],
                        yAxis: {
                            type: 'value',
                        },
                        dataZoom: [{
                            type: 'inside',
                            start: 50,
                            end: 100
                        }, {
                            start: 50,
                            end: 100,
                            handleIcon: 'M10.7,11.9v-1.3H9.3v1.3c-4.9,0.3-8.8,4.4-8.8,9.4c0,5,3.9,9.1,8.8,9.4v1.3h1.3v-1.3c4.9-0.3,8.8-4.4,8.8-9.4C19.5,16.3,15.6,12.2,10.7,11.9z M13.3,24.4H6.7V23h6.6V24.4z M13.3,19.6H6.7v-1.4h6.6V19.6z',
                            handleSize: '80%',
                            handleStyle: {
                                color: '#fff',
                                shadowBlur: 3,
                                shadowColor: 'rgba(0, 0, 0, 0.6)',
                                shadowOffsetX: 2,
                                shadowOffsetY: 2
                            }
                        }],
                        series: [
                            {
                                name: '订单数',
                                type: 'bar',
                                barWidth: '60%',
                                data: trend.orderNums,
                                itemStyle: {
                                    normal: {
                                        color: 'rgb(255, 70, 131)'
                                    }
                                },
                                areaStyle: {
                                    normal: {
                                        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                                            offset: 0,
                                            color: 'rgb(255, 158, 68)'
                                        }, {
                                            offset: 1,
                                            color: 'rgb(255, 70, 131)'
                                        }])
                                    }
                                },

                            }]
                    };
                    orderTrend.setOption(option);
                }
            }
        });
    }*/

    /*  function orderTrend() {
         var orderTrend = echarts.init(document.getElementById('orderTrend'));
         $.ajax({
             url: prefix + "/orderTrend",
             type: 'POST',
             dataType: 'JSON',
             data: {},
             success: function (data) {
                 if (data.code == 0) {
                     var trend = data.trend;
                     if (!trend) {
                         return;
                     }
                     var option = {
                         title: {
                             text: '订单走势图'
                         },
                         tooltip: {
                             trigger: 'axis',
                             position: function (pt) {
                                 return [pt[0], '20%'];
                             }
                         },
                         grid: {
                             left: '3%',
                             right: '4%',
                             bottom: '3%',
                             containLabel: true
                         },
                         toolbox: {
                             feature: {
                                 dataZoom: {
                                     yAxisIndex: 'none'
                                 },
                                 restore: {},
                                 saveAsImage: {}
                             }
                         },
                         xAxis: {
                             type: 'category',
                             boundaryGap: false,
                             data: trend.days
                         },
                         yAxis: {
                             type: 'value',
                             boundaryGap: [0, '100%']
                         },
                         dataZoom: [{
                             type: 'inside',
                             start: 50,
                             end: 100
                         }, {
                             start: 50,
                             end: 100,
                             handleIcon: 'M10.7,11.9v-1.3H9.3v1.3c-4.9,0.3-8.8,4.4-8.8,9.4c0,5,3.9,9.1,8.8,9.4v1.3h1.3v-1.3c4.9-0.3,8.8-4.4,8.8-9.4C19.5,16.3,15.6,12.2,10.7,11.9z M13.3,24.4H6.7V23h6.6V24.4z M13.3,19.6H6.7v-1.4h6.6V19.6z',
                             handleSize: '80%',
                             handleStyle: {
                                 color: '#fff',
                                 shadowBlur: 3,
                                 shadowColor: 'rgba(0, 0, 0, 0.6)',
                                 shadowOffsetX: 2,
                                 shadowOffsetY: 2
                             }
                         }],
                         series: [
                             {
                                 name: '订单数',
                                 type: 'line',
                                 smooth: true,
                                 symbol: 'none',
                                 sampling: 'average',
                                 itemStyle: {
                                     normal: {
                                         color: 'rgb(255, 70, 131)'
                                     }
                                 },
                                 areaStyle: {
                                     normal: {
                                         color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                                             offset: 0,
                                             color: 'rgb(255, 158, 68)'
                                         }, {
                                             offset: 1,
                                             color: 'rgb(255, 70, 131)'
                                         }])
                                     }
                                 },
                                 data: trend.orderNums
                             }]
                     };
                     orderTrend.setOption(option);
                 }
             }
         });
     } */
</script>
</body>
</html>